<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="Webpixels">
  <title>Quick – Website UI Kit (FREE)</title>
  <!-- Preloader -->
  <style>
    @keyframes hidePreloader {
      0% {
        width: 100%;
        height: 100%;
      }

      100% {
        width: 0;
        height: 0;
      }
    }

    body>div.preloader {
      position: fixed;
      background: white;
      width: 100%;
      height: 100%;
      z-index: 1071;
      opacity: 0;
      transition: opacity .5s ease;
      overflow: hidden;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    body:not(.loaded)>div.preloader {
      opacity: 1;
    }

    body:not(.loaded) {
      overflow: hidden;
    }

    body.loaded>div.preloader {
      animation: hidePreloader .5s linear .5s forwards;
    }
  </style>
  <script>
    window.addEventListener("load", function() {
      setTimeout(function() {
        document.querySelector('body').classList.add('loaded');
      }, 300);
    });
  </script>
  <!-- Favicon -->
  <link rel="icon" th:href="@{/img/brand/favicon.png}" type="image/png"><!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/libs/fortawesome/fontawesome-free/css/all.min.css}">
  <!-- Quick CSS -->
  <link rel="stylesheet" th:href="@{/css/quick-website.css}" id="stylesheet">
</head>

<body>
<div class="modal fade" tabindex="-1" role="dialog" id="modal-cookies" data-backdrop="false" aria-labelledby="modal-cookies" aria-hidden="true">
  <div class="modal-dialog modal-dialog-aside left-4 right-4 bottom-4">
    <div class="modal-content bg-dark-dark">
      <div class="modal-body">
        <!-- Text -->
        <p class="text-sm text-white mb-3">
          We use cookies so that our themes work for you. By using our website, you agree to our use of cookies.
        </p>
        <!-- Buttons -->
        <button type="button" class="btn btn-sm btn-primary mr-2" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>
<!-- Main content -->
<section>
  <div class="container d-flex flex-column">
    <div class="row align-items-center justify-content-center min-vh-100">
      <div class="col-md-6 col-lg-5 col-xl-5 py-6 py-md-0">
        <div class="card shadow zindex-100 mb-0">
          <div class="card-body px-md-5 py-5">
            <div class="mb-5">
              <h6 class="h3">Login</h6>
              <p class="text-muted mb-0">Sign in to your account to continue.</p>
            </div>
            <span class="clearfix"></span>
            <form  th:action="@{/user/login}">
              <div class="form-group">
                <label class="form-control-label">Email address</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text"><i data-feather="user"></i></span>
                  </div>
                  <input type="email" class="form-control" id="input-email" placeholder="name@example.com">
                </div>
              </div>
              <div class="form-group mb-0">
                <div class="d-flex align-items-center justify-content-between">
                  <div>
                    <label class="form-control-label">Password</label>
                  </div>
                  <div class="mb-2">
                    <a th:href="@{#}" class="small text-muted text-underline--dashed border-primary" data-toggle="password-text" data-target="#input-password">Show password</a>
                  </div>
                </div>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text"><i data-feather="key"></i></span>
                  </div>
                  <input type="password" class="form-control" id="input-password" placeholder="Password">
                </div>
              </div>
              <div class="mt-4">
                <button type="submit" class="btn btn-block btn-primary">Sign in</button></div>
            </form>
          </div>
          <div class="card-footer px-md-5"><small>Not registered?</small>
            <a th:href="@{#}" class="small font-weight-bold">Create account</a></div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Core JS  -->
<script src="/libs/jquery/dist/jquery.min.js"></script>
<script src="/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/libs/svg-injector/dist/svg-injector.min.js"></script>
<script src="/libs/feather-icons/dist/feather.min.js"></script>
<!-- Quick JS -->
<script src="/js/quick-website.js"></script>
<!-- Feather Icons -->
<script>
  feather.replace({
    'width': '1em',
    'height': '1em'
  })
</script>
</body>

</html>